import React, { useState, useEffect } from 'react'
import './style.less'
import { Consumer } from '../../utils/context'
import { Typography, Button, Menu, Dropdown, Divider, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { pjfExamClassByKemu, scoreEchartY } from './workClass'
import echarts from 'echarts'
import ecStat from 'echarts-stat'

const { Title, Text } = Typography

function AnalyseGrade(props) {
    const {
        classData,
        studentData,
        choiceExamInfo,
        scoreDataExam
    } = props.value
    const [choiceClassInfo, setChoiceClassInfo] = useState({})
    const [scoreDataClass, setScoreDataClass] = useState([])
    const [studentDataClass, setStudentDataClass] = useState([])
    const [chart1X, setChart1X] = useState([])
    const [chart1Data, setChart1Data] = useState([])
    const [choiceKemu, setChoiceKemu] = useState('科目列表')

    useEffect(() => {
        if (choiceKemu !== '科目列表') {
            // console.log(classData)
            // 图表1配置
            var myRegression = ecStat.regression('exponential', chart1Data)

            myRegression.points.sort(function (a, b) {
                return a[0] - b[0]
            })
            const myChart1 = echarts.init(
                document.getElementsByClassName('echart-1')[0]
            )
            myChart1.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: '分数',
                        type: 'category',
                        data: chart1X,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '人数',
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        // barWidth: '60%',
                        data: chart1Data
                    }
                ]
            })
        }
    }, [chart1Data, chart1X, choiceKemu])

    const getChart1X = (min, max, space) => {
        let list = []
        for (let i = min; i <= max; i = i + space) {
            list.push(i + '+')
        }
        return list
    }
    const choiceClassButtonEvent = (e) => {
        // console.log(e)
        setChoiceClassInfo({
            no: e.key,
            name: classData.filter((item) => +item.no === +e.key)[0].name
        })
        const studentList = studentData.filter(
            (item) => +item.classNo === +e.key
        )
        setStudentDataClass(studentList)
        const studentNoList = studentList.map((item) => +item.no)
        const scoreList = scoreDataExam.filter((item) =>
            studentNoList.some((cell) => +cell === +item.studentNo)
        )
        setScoreDataClass(scoreList)
    }
    const choiceKemuButtonEvent = (e) => {
        setChoiceKemu(e.key)
        switch (e.key) {
            case '总分':
                setChart1X(getChart1X(0, 750, 25))
                setChart1Data(
                    scoreEchartY(
                        scoreDataClass,
                        [0, 750, 25],
                        [
                            'chinese',
                            'math',
                            'eglish',
                            'physics',
                            'chemistry',
                            'biology'
                        ]
                    )
                )
                break
            case '语文':
                setChart1X(getChart1X(0, 150, 5))
                setChart1Data(
                    scoreEchartY(scoreDataClass, [0, 150, 5], ['chinese'])
                )
                break
            case '数学':
                setChart1X(getChart1X(0, 150, 5))
                setChart1Data(
                    scoreEchartY(scoreDataClass, [0, 150, 5], ['math'])
                )
                break
            case '英语':
                setChart1X(getChart1X(0, 150, 5))
                setChart1Data(
                    scoreEchartY(scoreDataClass, [0, 150, 5], ['eglish'])
                )
                break
            case '物理':
                setChart1X(getChart1X(0, 120, 5))
                setChart1Data(
                    scoreEchartY(scoreDataClass, [0, 120, 5], ['physics'])
                )
                break
            case '化学':
                setChart1X(getChart1X(0, 108, 5))
                setChart1Data(
                    scoreEchartY(scoreDataClass, [0, 108, 4], ['chemistry'])
                )
                break
            case '生物':
                setChart1X(getChart1X(0, 72, 5))
                setChart1Data(
                    scoreEchartY(scoreDataClass, [0, 72, 3], ['biology'])
                )
                break
            default:
                break
        }
    }
    const menu = (
        <Menu
            onClick={(e) => {
                choiceKemuButtonEvent(e)
            }}
        >
            <Menu.Item key="总分">总分</Menu.Item>
            <Menu.Item key="语文">语文</Menu.Item>
            <Menu.Item key="数学">数学</Menu.Item>
            <Menu.Item key="英语">英语</Menu.Item>
            <Menu.Item key="物理">物理</Menu.Item>
            <Menu.Item key="化学">化学</Menu.Item>
            <Menu.Item key="生物">生物</Menu.Item>
        </Menu>
    )
    const menuClass = (
        <Menu
            onClick={(e) => {
                choiceClassButtonEvent(e)
            }}
        >
            {classData.length ? (
                classData.map((item) => {
                    return <Menu.Item key={item.no}>{item.name}</Menu.Item>
                })
            ) : (
                <span>暂无班级</span>
            )}
        </Menu>
    )

    return choiceExamInfo.no ? (
        <div className="analyse-class-container">
            <div>
                <span>请选择班级名称：</span>
                <Dropdown overlay={menuClass}>
                    <Button type="primary">
                        {choiceClassInfo.name
                            ? choiceClassInfo.name
                            : '班级列表'}
                        <DownOutlined />
                    </Button>
                </Dropdown>
            </div>
            {choiceClassInfo.no ? (
                <div>
                    <Title>
                        <span>{choiceExamInfo.name}</span>
                    </Title>
                    <Divider />
                    <div className="total-number-box">
                        <Space size="large">
                            <Text>
                                当前班级：
                                <Text strong type="danger">
                                    {choiceClassInfo.name
                                        ? choiceClassInfo.name
                                        : '空'}
                                </Text>
                            </Text>
                            <Text>
                                总人数：
                                <Text strong type="danger">
                                    {studentDataClass.length
                                        ? studentDataClass.length
                                        : '空'}
                                </Text>
                            </Text>
                        </Space>
                    </div>
                    <Divider />
                    <div className="total-pjf-box">
                        <Title level={3}>总平均分：</Title>
                        <Text strong type="danger">
                            {choiceClassInfo.no
                                ? pjfExamClassByKemu(scoreDataClass, [
                                      'chinese',
                                      'math',
                                      'eglish',
                                      'physics',
                                      'chemistry',
                                      'biology'
                                  ])
                                : '空'}
                        </Text>
                        <span className="total-score">满分：750</span>
                    </div>
                    <Title level={3}>各科平均分：</Title>
                    <div className="kemu-pjf-box">
                        <Space size="large">
                            <Text>
                                语文：
                                <Text strong type="danger">
                                    {choiceClassInfo.no
                                        ? pjfExamClassByKemu(scoreDataClass, [
                                              'chinese'
                                          ])
                                        : '空'}
                                </Text>
                                /150
                            </Text>
                            <Text>
                                数学：
                                <Text strong type="danger">
                                    {choiceClassInfo.no
                                        ? pjfExamClassByKemu(scoreDataClass, [
                                              'math'
                                          ])
                                        : '空'}
                                </Text>
                                /150
                            </Text>
                            <Text>
                                英语：
                                <Text strong type="danger">
                                    {choiceClassInfo.no
                                        ? pjfExamClassByKemu(scoreDataClass, [
                                              'eglish'
                                          ])
                                        : '空'}
                                </Text>
                                /150
                            </Text>
                        </Space>
                    </div>
                    <div>
                        <Space size="large">
                            <Text>
                                物理：
                                <Text strong type="danger">
                                    {choiceClassInfo.no
                                        ? pjfExamClassByKemu(scoreDataClass, [
                                              'physics'
                                          ])
                                        : '空'}
                                </Text>
                                /120
                            </Text>
                            <Text>
                                化学：
                                <Text strong type="danger">
                                    {choiceClassInfo.no
                                        ? pjfExamClassByKemu(scoreDataClass, [
                                              'chemistry'
                                          ])
                                        : '空'}
                                </Text>
                                /108
                            </Text>
                            <Text>
                                生物：
                                <Text strong type="danger">
                                    {choiceClassInfo.no
                                        ? pjfExamClassByKemu(scoreDataClass, [
                                              'biology'
                                          ])
                                        : '空'}
                                </Text>
                                /72
                            </Text>
                        </Space>
                    </div>
                    <Divider />
                    <div>
                        <span>请选择科目名称：</span>
                        <Dropdown overlay={menu}>
                            <Button type="primary">
                                {choiceKemu} <DownOutlined />
                            </Button>
                        </Dropdown>
                    </div>
                    {choiceKemu !== '科目列表' ? (
                        <div className="echart-1"></div>
                    ) : (
                        <></>
                    )}
                </div>
            ) : (
                <></>
            )}
        </div>
    ) : (
        <></>
    )
}

function hoc(A) {
    return () => {
        return (
            <Consumer>
                {(value) => {
                    return <A value={value} />
                }}
            </Consumer>
        )
    }
}

export default hoc(AnalyseGrade)
